<template>
    <div v-for="item in datas">列表渲染：数据是字符串{{ item }}</div>
    <div v-for="item of datas">列表渲染：可以使用of，数据是字符串{{ item }}</div>
    <div v-for="(item ,index) in datas">列表渲染：数据是字符串{{ item }} --- 索引{{ index }}</div>
    <div v-for="item in persons">列表渲染：数据是对象---{{ item.name }}---{{ item.age }}---{{ item.sex }}</div>
    <div v-for="(item,key,index) in person">列表渲染：遍历单个对象里面的属性内容---{{ item }}---{{ key }}---{{ index }}</div>
    
    <div v-for="(item ,index) in persons" :key="index">
        <p>列表渲染：需要加上key(一般为后端数据的主键id)，避免数据顺序改变了，导致每次全部重行渲染，数据是对象---{{ item.name }}---{{ item.age }}---{{ item.sex }}</p>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                datas:['数据1','数据2'],
                persons:[
                    {
                        "name":"shansan",
                        "age":18,
                        "sex":"男"

                    },
                    {
                        "name":"lisi",
                        "age":20,
                        "sex":"女"

                    }
                ],
                person:{
                   "name":"wangwu",
                    "age":22,
                    "sex":"女" 
                }
            }
        }
    }

</script>